import React, { memo } from "react";
import type { FC, ReactNode } from "react";
import { AreaHeaderv2Wrapper } from "./styled";
import { formatCreateTime, formatTime, formatUrlSize } from "@/utils/format";
import { CaretRightOutlined } from "@ant-design/icons";
import { AddPlaySongListAction, changeSongdetailAction } from "@/views/player/store";
import { useAppDispatch } from "@/store";

interface IProps {
  children?: ReactNode;
  itemData: any;
  playList: any[];
  isHeaderType?: string;
  onShowDesFn: (arg: number) => void
}

const AreaHeaderv2: FC<IProps> = (props: IProps) => {
  const { itemData, playList, onShowDesFn, isHeaderType = "song" } = props
  // 控制desModal显示隐藏

  const handleShowDes = () => {
    onShowDesFn(1)
  }

  const dispatch = useAppDispatch()
  // 播放歌曲
  const handlePlay = () => {
    // 1.将歌单的歌曲 添加到播放列表中
    playList.forEach(item => {
      dispatch(AddPlaySongListAction(item))
    })
    // 2.播放当前的歌单第一首歌曲
    dispatch(changeSongdetailAction(playList[0].id))
  }

  return <AreaHeaderv2Wrapper>
    <div className="left-img">
      <img src={formatUrlSize(itemData?.blurPicUrl || itemData?.coverImgUrl, 520)} alt="歌曲封面" />
    </div>
    <div className="right-info">
      <div className="song-name">{itemData.name}</div>
      <div className="singer">{itemData?.subType || "Playlist"} by {itemData?.artist?.name || 'Apple Music'}</div>
      <div className="message">
        {isHeaderType === "song" && `${formatCreateTime(itemData.publishTime, "YYYY")}} · ${playList.length} 首歌 · ${formatTime(playList[0].dt / 1000)}`}
        {isHeaderType === "playlist" && `最后更新日期${formatCreateTime(itemData.updateTime, "YYYY年MM月DD日")} · ${playList.length}首歌`}
      </div>
      <div className="desc" onClick={handleShowDes}>{itemData.description}</div>
      <div className="controller">
        <div className="play-btn">
          <CaretRightOutlined style={{ color: "#335eea" }} />
          <div className="text" onClick={handlePlay}>播放</div>
        </div>
        <div className="detail">...</div>
      </div>
    </div>
  </AreaHeaderv2Wrapper>;
};

export default memo(AreaHeaderv2);